
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { BookOpen, User, Star, Brain, Edit } from "lucide-react";
import { Profile } from "@/types/profile";
import { EditProfileDialog } from "./EditProfileDialog";
import { useLanguage } from "@/contexts/LanguageContext";
import { useRole } from "@/contexts/RoleContext";

interface ProfileHeaderProps {
  profile: Profile;
  onProfileUpdate: (profile: Profile) => void;
}

export const ProfileHeader = ({ profile, onProfileUpdate }: ProfileHeaderProps) => {
  const { t } = useLanguage();
  const { role } = useRole();
  
  // Mock data for completed assessments - in real app this would come from API/state
  const teacherAssessmentResults = {
    teachingPhilosophy: "Constructivist Educator",
    strengths: "Creative Facilitator",
    interests: "Social-Investigative"
  };

  const getProfileLabel = () => {
    return role === 'teacher' ? 'My Profile' : 'My Profile';
  };
  
  return (
    <div className="space-y-6">
      {/* Avatar and Edit Profile Button */}
      <Card className="text-center">
        <CardContent className="pt-6">
          <div className="flex flex-col items-center space-y-4">
            <Avatar className="w-20 h-20">
              <AvatarImage src="https://api.dicebear.com/7.x/micah/svg?seed=profile" />
              <AvatarFallback><User className="w-8 h-8" /></AvatarFallback>
            </Avatar>
            <EditProfileDialog profile={profile} onProfileUpdate={onProfileUpdate}>
              <Button size="sm" variant="outline" className="w-full hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-600 hover:text-white hover:border-transparent transition-all duration-300">
                <Edit className="mr-2 h-4 w-4" />
                {t('btn.editProfile')}
              </Button>
            </EditProfileDialog>
          </div>
        </CardContent>
      </Card>

      {/* Learning/Teaching Profile */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <BookOpen className="w-4 h-4 text-blue-500" />
            <span className="bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent font-semibold">
              {getProfileLabel()}
            </span>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Teaching Philosophy / Learning Style */}
          <div>
            <h4 className="text-xs font-semibold text-gray-700 mb-2">
              {role === 'teacher' ? 'Teaching Philosophy' : t('profile.learningStyle')}
            </h4>
            {role === 'teacher' && !teacherAssessmentResults.teachingPhilosophy ? (
              <Badge variant="outline" className="text-xs border-blue-200 text-blue-600">
                Complete assessment to see your style
              </Badge>
            ) : (
              <Badge className="text-xs bg-gradient-to-r from-blue-100 to-purple-100 text-blue-700 border-blue-200 hover:from-blue-200 hover:to-purple-200">
                {role === 'teacher' ? teacherAssessmentResults.teachingPhilosophy : profile.learningStyle}
              </Badge>
            )}
          </div>
          
          {/* Strengths */}
          <div>
            <h4 className="text-xs font-semibold text-gray-700 mb-2">
              {role === 'teacher' ? 'Strengths' : 'Strengths'}
            </h4>
            {role === 'teacher' && !teacherAssessmentResults.strengths ? (
              <Badge variant="outline" className="text-xs border-blue-200 text-blue-600">
                Complete assessment to see your strengths
              </Badge>
            ) : (
              <Badge className="text-xs bg-gradient-to-r from-blue-100 to-purple-100 text-blue-700 border-blue-200 hover:from-blue-200 hover:to-purple-200">
                {role === 'teacher' ? teacherAssessmentResults.strengths : t('profile.creativeContributor')}
              </Badge>
            )}
          </div>
          
          {/* Interests */}
          <div>
            <h4 className="text-xs font-semibold text-gray-700 mb-2">
              {role === 'teacher' ? 'Interest Profile' : 'Interests'}
            </h4>
            {role === 'teacher' && !teacherAssessmentResults.interests ? (
              <Badge variant="outline" className="text-xs border-blue-200 text-blue-600">
                Complete assessment to see your interest profile
              </Badge>
            ) : (
              <Badge className="text-xs bg-gradient-to-r from-blue-100 to-purple-100 text-blue-700 border-blue-200 hover:from-blue-200 hover:to-purple-200">
                {role === 'teacher' ? teacherAssessmentResults.interests : t('profile.socialInvestigative')}
              </Badge>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Key Strengths */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <Star className="w-4 h-4 text-blue-500" />
            <span className="bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent font-semibold">
              {t('profile.keyStrengths')}
            </span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-2">
            <Badge variant="outline" className="text-xs border-blue-200 text-blue-600 hover:bg-blue-50">{t('profile.analytical')}</Badge>
            <Badge variant="outline" className="text-xs border-blue-200 text-blue-600 hover:bg-blue-50">{t('profile.creative')}</Badge>
            <Badge variant="outline" className="text-xs border-blue-200 text-blue-600 hover:bg-blue-50">{t('profile.collaborative')}</Badge>
            <Badge variant="outline" className="text-xs border-blue-200 text-blue-600 hover:bg-blue-50">{t('profile.visual')}</Badge>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};
